<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>应急预案</title>
		<link rel="stylesheet" href="./Package/css/plan.css">
		<link rel="stylesheet" href="./Package/element/element.css">
		<link rel="stylesheet" type="text/css" href="./Package/css/iconfont.css" />
		<style type="text/css">
			body,
			html,
			#app {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
				background: #e4e5ea;
			}
			
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="header">
				<div class="head-title">{{ plantitle.planName }}
					<span class="plan-event">关联事件：{{ plantitle.eventName }}</span>
					<div style="display: inline-block;float: right;margin-right: 35px;font-size: 17px;">
						<div class="plan-time head-box">
							启动时间：
							<div>{{ plantitle.createTime }}</div>
						</div>
						<div class="time-field">
							<span class="time-val hour-val">{{ hour }}</span>
							<span class="time-colon"> : </span>
							<span class="time-val minute-val">{{ minutes }}</span>
							<span class="time-colon"> : </span>
							<span class="time-val second-val">{{ seconds }}</span></div>
					</div>
				</div>
			</div>
			<div class="content">
				<div class="content-top">
					<el-tabs type="card" @tab-click="handleClick" v-model="activeName">
						<el-tab-pane label="预案" name="1">
							<div class="stepleft">
								<ul style="padding: 30px 20px 10px;">
									<template v-for="(item,index) in slist">
										<li v-if="item.disposalStatus == 0 && index != current" class="textli" @click="stepnext(index,item)">{{item.stepName}}</li>
										<li v-if="item.disposalStatus == 1 && index != current" class="textli1" @click="stepnext(index,item)">{{item.stepName}}</li>
										<li v-if="item.disposalStatus == 2 && index != current" class="textli2" @click="stepnext(index,item)">{{item.stepName}}</li>
										<li v-if="index == current" class="textliclick" @click="stepnext(index,item)">{{item.stepName}}</li>
										<template v-if="index < slist.length-1">
											<li v-if="item.disposalStatus > 0" class="iconfont icon-xiangxiajiantou" style="font-size: 25px;color: #00b9c2;"></li>
											<li v-if="item.disposalStatus == 0" class="iconfont icon-xiangxiajiantou" style="font-size: 25px;"></li>
										</template>
									</template>
								</ul>
							</div>
							<div class="stepright">
								<div class="stepright-top">
									<span v-if="stepdetails.disposalStatus == 0" class="top-status">未开始</span>
									<span v-if="stepdetails.disposalStatus == 1" class="top-status">进行中</span>
									<span v-if="stepdetails.disposalStatus == 2" class="top-status">已结束</span>
									<span class="top-title">{{ stepdetails.stepName }}</span>
									<el-button v-if="stepdetails.disposalStatus == 0" @click="start(1)" type="primary" plain size="small" style="padding: 6px 14px;background-color: transparent;border: #00a7b4 1px solid;color: #00b8c2;float:right;font-size: 14px;">开始处置</el-button>
									<el-button v-if="stepdetails.disposalStatus == 1" @click="start(2)" type="primary" plain size="small" style="padding: 6px 14px;background-color: transparent;border: #00a7b4 1px solid;color: #00b8c2;float:right;font-size: 14px;">完成处置</el-button>
									<el-button v-if="stepdetails.disposalStatus == 1" @click="assignment()" type="primary" plain size="small" style="padding: 6px 14px;background-color: transparent;border: #00a7b4 1px solid;color: #00b8c2;float:right;font-size: 14px;margin: 0 5px;">一键指派</el-button>
									<p>{{ stepdetails.stepIntroduce }}</p>
								</div>
								<ul class="stepright-context">
									<template v-for="(item,i) in steplist">
										<li @click="stepclick($event,item)" style="cursor: pointer;">
											<i class="iconfont icon-danxuanfangdiancg" style="color: #bebebe;"></i>
											<div class="list-top">
												<p>{{ item.stepDetailsContent }}</p>
												<span>
												  <el-button v-if="item.completionStatus == 0 && stepdetails.disposalStatus == 1" @click.stop="complete(item)" class="btnstyle" type="primary" plain size="small">完成</el-button>
												  <el-button v-if="item.completionStatus == 1 && stepdetails.disposalStatus == 1" class="btnstyle" type="primary" plain size="small">已完成</el-button>
												  <!--<el-button v-if="item.completionStatus == 0" class="btnstyle" type="primary" plain size="small" @click="Instructions = true">批示</el-button>-->
												  <el-button v-if="item.completionStatus == 0 && stepdetails.disposalStatus == 1" class="btnstyle" type="primary" plain size="small" @click.stop="opinionshow(item)">意见</el-button>
												  <el-button v-if="item.completionStatus == 0 && stepdetails.disposalStatus == 1" class="btnstyle" type="primary" plain size="small" @click="assign(item)">指派</el-button>
												</span>
											</div>
											<div class="list-group">
												<template v-for="(data,index) in item.groupListAndPersonList">
													<i class="iconfont icon-renyuan" style="color: #9da7c4;"></i>
													<span style="color: #9da7c4;margin-right: 10px;">{{ data.name }}</span>
												</template>												
												<span v-if="item.appointedState == 0">【未指派】</span>
												<span v-if="item.appointedState == 1" style="color: #eb5b00;">【已接收】</span>
											</div>
										</li>
									</template>
								</ul>
							</div>
						</el-tab-pane>
						<el-tab-pane label="执行记录" name="2">
							<p style="height: 37px;line-height: 61px;font-size: 18px;padding-left: 15px;">共有执行记录11条</p>
							<el-divider></el-divider>
							<el-timeline style="padding: 0 35px;" :reverse="reverse">
								<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon" :type="activity.type" :color="activity.color" :size="activity.size">
									<span style="color: #666c7d;margin-right: 15px;font-size: 16px;">{{activity.createTime}}</span><span style="color: #666c7d;margin-right: 15px;font-size: 16px;">操作点: {{activity.nickName}}</span>
									<p v-if="activity.operationType == 0" style="color: #666c7d;font-size: 16px;"><span style="color: #034289;">其他：</span>{{activity.content}}</p>
									<p v-if="activity.operationType == 1" style="color: #666c7d;font-size: 16px;"><span style="color: #034289;">任务指派：</span>{{activity.content}}</p>
									<p v-if="activity.operationType == 2" style="color: #666c7d;font-size: 16px;"><span style="color: #034289;">任务完成：</span>{{activity.content}}</p>
									<p v-if="activity.operationType == 3" style="color: #666c7d;font-size: 16px;"><span style="color: #034289;">短信通知：</span>{{activity.content}}</p>
									<p v-if="activity.operationType == 4" style="color: #666c7d;font-size: 16px;"><span style="color: #034289;">语音通知：</span>{{activity.content}}</p>
								</el-timeline-item>
							</el-timeline>
						</el-tab-pane>
						<el-tab-pane label="预案文档" name="3">

						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="center-right">
					<h3 style="font-weight: 500;margin-bottom: 35px;">人员调度</h3>
					<span style="color: #fff;background-color: #ee5f00;border: 1px solid #ee5f00;padding: 5px 25px;border-radius: 19px;">当前组</span>
					<div class="group-list" v-for="(item,i) in personlist">
						<p>{{ item.name }}</p>
						<dir style="margin-top: 15px;">
							<template v-for="(pro,index) in item.children">
								<span style="width: 125px;height: 101px;line-height: 101px;background: #edf0f5;display: inline-block;text-align: center;margin-right: 15px;">{{ pro.name }}</span>
							</template>
						</dir>
					</div>
				</div>
			</div>
			<el-dialog title="新增指派" :visible.sync="centerDialogVisible" width="40%" top="180px" center>
				<div style="width: 40%;float: left;padding-right: 15px;height: 250px;border-right: #dbdbdb 1px solid;margin-bottom: 15px;">
					<el-input placeholder="搜索人员" v-model="filterText" style="margin-bottom: 15px;">
					</el-input>

					<el-tree class="filter-tree" :data="treelist" show-checkbox :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree">
					</el-tree>
				</div>
				<div style="width: 59%;float: left;padding: 0 10px 10px;height: 250px;margin-bottom: 15px;">
					<p style="margin-bottom: 14px;font-size: 17px;">任务描述</p>
					<el-input type="textarea" rows="5" v-model="desc"></el-input>
					<el-divider></el-divider>
					<div style="margin-top: 20px;">
						<el-checkbox v-model="checked">同时短信通知</el-checkbox>
						<el-checkbox v-model="voiceFlag">同时电话通知</el-checkbox>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="centerDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="save(centerDialogVisible = false)">确 定</el-button>
			  </span>
			</el-dialog>
			<el-dialog title="处理意见" :visible.sync="opinion" width="30%" top="180px" center>
				<div style="padding: 10px 10px;height: 100px;margin-bottom: 15px;">
					<el-input type="textarea" rows="5" v-model="opiniontext" placeholder="意见内容（可不填）"></el-input>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="opinion = false">取 消</el-button>
			    <el-button type="primary" @click="opinionsave(opinion = false)">确 定</el-button>
			  </span>
			</el-dialog>

			<el-dialog title="领导批示" :visible.sync="Instructions" width="30%" top="180px" center>
				<div style="padding: 10px 10px;height: 100px;margin-bottom: 15px;">
					<el-input type="textarea" rows="5" v-model="Instructionstext" placeholder="批示内容（可不填）"></el-input>
				</div>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="Instructions = false">取 消</el-button>
			    <el-button type="primary" @click="Instructionssave(Instructions = false)">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
	</body>

</html>

<script src="./Package/js/vue.js"></script>
<script src="./Package/js/index.js"></script>
<script src="./Package/element/element.js"></script>
<script src="./Package/js/jquery-1.7.2.js"></script>

<script src="./Package/js/config.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			minutes: '',
			seconds: '',
			hour: '',
			slist: [],
			steplist: [],
			personlist: [],
			stepdetails: [],
			plantitle: '',
			current: 0,
			centerDialogVisible: false,
			opinion: false,
			Instructions: false,
			opiniontext: '',
			Instructionstext: '',
			datadata: '',
			reverse: false,
			checked: true,
			voiceFlag: true,
			desc: '',
			filterText: '',
			treelist: [],
			defaultProps: {
				children: 'children',
				label: 'name'
			},
			activities: [],
			activeName: '1',
			id: '',
		},

		mounted() {
			console.log(this.getQueryString('id'))
			this.id = this.getQueryString('id');
			this.getdata();
			this.getdata1();
//			this.login();
		},
		methods: {
			//指派保存
			save() {
				var Datas = this.$refs.tree.getCheckedNodes();
				console.log(Datas)
				let phones = [];
				for(let i = 0; i < Datas.length; i++) {
					if(Datas[i].children.length == 0) {
						phones.push(Datas[i].id);
					}
				}
				var messageFlag = '';
				var voiceFlag = '';
				if(this.checked) {
					messageFlag = 1
				} else {
					messageFlag = 0
				}
				if(this.voiceFlag) {
					voiceFlag = 1
				} else {
					voiceFlag = 0
				}
				console.log(phones)
				$.ajax({
					type: 'POST',
					url: httpurl + 'event/accident/updateStepStatus',
					dataType: 'json',
					data: JSON.stringify({
						"id": this.datadata.id,
						"appointedState": 1, //指派状态
						"personList": phones,
						"message": this.desc, //通知消息
						messageFlag: messageFlag,
						voiceFlag: voiceFlag
					}),
					contentType: 'application/json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						if(data.code == 200) {
							vm.$message({
								message: '已指派',
								type: 'success'
							});
							$.ajax({
								type: 'get',
								url: httpurl + 'event/accident/getPlanStep/' + vm.stepdetails.id,
								dataType: 'json',
								headers: {
									Authorization: localStorage.getItem('token')
								},
								success: function(data) {
									console.log(data)
									vm.steplist = data.data;
								}
							})
						}
					}
				})
			},
			//一键指派
			assignment() {
				$.ajax({
					type: 'POST',
					url: httpurl + 'event/accident/designate',
					dataType: 'json',
					data: JSON.stringify({
						"accidentOrderDetailsId": this.stepdetails.id,
						"accidentOrderId": this.id
					}),
					contentType: 'application/json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						if(data.code == 200) {
							vm.stepnext(vm.current, vm.slist[vm.current]);
							vm.$message({
								message: '已指派',
								type: 'success'
							});
						}
					}
				})
			},
			//点击指派
			assign(dataa) {
				console.log(dataa);
				this.treelist = [];
				this.checked = true;
				this.voiceFlag = true;
				$.ajax({
					type: 'post',
					url: httpurl + 'event/accident/getPersonGroupList',
					data:JSON.stringify(dataa.personGroupListOb),
					contentType: 'application/json',
					dataType: 'json',
					async: false,
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.treelist = data.data;
						vm.desc = dataa.stepDetailsContent;
						console.log(vm.treelist)
						vm.centerDialogVisible = true;
					}
				})
			},
			//完成/已完成
			complete(dataa) {
				$.ajax({
					type: 'POST',
					url: httpurl + 'event/accident/updateStepStatus',
					dataType: 'json',
					data: JSON.stringify({
						"id": dataa.id,
						"completionStatus": 1
					}),
					contentType: 'application/json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						if(data.code == 200) {
							vm.$message({
								message: '已完成',
								type: 'success'
							});
							$.ajax({
								type: 'get',
								url: httpurl + 'event/accident/getPlanStep/' + vm.stepdetails.id,
								dataType: 'json',
								headers: {
									Authorization: localStorage.getItem('token')
								},
								success: function(data) {
									console.log(data)
									vm.steplist = data.data;
								}
							})
						}
					}
				})
			},
			//开始/完成处置
			start(status) {
				$.ajax({
					type: 'POST',
					url: httpurl + 'event/accident/updateOrderDetailsStatus',
					dataType: 'json',
					data: JSON.stringify({
						"id": this.stepdetails.id,
						"disposalStatus": status
					}),
					contentType: 'application/json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						if(data.code == 200) {
							if(status == 1) {
								vm.$message({
									message: '已开始处置',
									type: 'success'
								});
							} else {
								vm.$message({
									message: '已完成处置',
									type: 'success'
								});
							}
							vm.getdata();
						}
					}
				})
			},
			//点击步骤
			stepnext(index, data) {
				console.log(index)
				this.current = index;
				this.stepdetails = data;
				$.ajax({
					type: 'get',
					url: httpurl + 'event/accident/getPlanStep/' + data.id,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.steplist = data.data;
					}
				})
			},
			stepclick(e, data) {
				//				console.log(e.currentTarget.class)
				this.datadata = data;
				$('.stepright-context li .icon-danxuanfangdiancg').css('color', '#bebebe');
				e.currentTarget.firstElementChild.style.color = '#ff5401';
				$.ajax({
					type: 'post',
					url: httpurl + 'event/accident/getPersonGroupList',
					data:JSON.stringify(data.personGroupListOb),
					contentType: 'application/json',
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.personlist = data.data;
					}
				})
			},
			handleClick(tab, event) {
				console.log(tab, event);
				if(tab.name == '2') {
					$.ajax({
						type: 'get',
						url: httpurl + 'event/manger/logging/getExecutiveLogging/' + this.id,
						dataType: 'json',
						headers: {
							Authorization: localStorage.getItem('token')
						},
						success: function(data) {
							console.log(data)
							vm.activities = data.data;
							vm.activities[0].size = 'large';
							vm.activities[0].type = 'primary';
							vm.activities[0].icon = 'el-icon-more';
							vm.activities[0].color = '#ee5f00';
						}
					})
				}
			},
			filterNode(value, data) {
				console.log(value, data)
				if(!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			// 登陆系统获取token
			login() {
				
				$.ajax({
					type: 'POST',
					url: httpurl + 'login',
					data: JSON.stringify({
						password: "123456",
						username: "admin",
						uuid: "312a410708cb49c19673f75b4e4bca67",
					}),
					contentType: "application/json",
					dataType: 'json',
					success: function(data) {
						// 成功的回调
						console.log(data)

						if(data.code == 200) {
							localStorage.setItem('token', data.token)
							vm.getdata();

						}

					},
					error: function(err) {
						// 失败的回调
						console.log(err)
					}
				})
			},
			getdata() {
				$.ajax({
					type: 'get',
					url: httpurl + 'event/accident/getPlanContent/' + this.id,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.slist = data.data;
						vm.stepnext(vm.current, vm.slist[vm.current]);
					}
				})
			},
			getdata1() {
				$.ajax({
					type: 'get',
					url: httpurl + 'event/accident/getAccidentContent/' + this.id,
					dataType: 'json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						vm.plantitle = data.data;
						vm.timeFn(data.data.createTime);
						vm.time(data.data.createTime)
					}
				})
			},
			opinionshow(dataa) {
				this.opinion = true;
				this.datadata = dataa;
			},
			opinionsave() {
				$.ajax({
					type: 'POST',
					url: httpurl + 'event/accident/updateStepStatus',
					dataType: 'json',
					data: JSON.stringify({
						"id": this.datadata.id,
						"stepDetailsAdvise": this.opiniontext,
					}),
					contentType: 'application/json',
					headers: {
						Authorization: localStorage.getItem('token')
					},
					success: function(data) {
						console.log(data)
						if(data.code == 200) {
							vm.$message({
								message: '保存完成',
								type: 'success'
							});
						}
					}
				})
			},
			time(data) {
				setTimeout(function() {
					vm.timeFn(data);
					vm.time(data);
				}, 1000)
			},
			timeFn(dateBegin) {
				//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
				var dateEnd = new Date(); //获取当前时间
				var dateDiff = dateEnd.getTime() - new Date(dateBegin); //时间差的毫秒数
				var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
				var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000)

				var leave4 = leave3 % (60 * 1000) //计算分钟数后剩余的毫秒数
				var minseconds = Math.round(leave4 / 1000)
				var timeFn = [];
				timeFn.push(dayDiff);
				timeFn.push(hours);
				timeFn.push(minutes);
				timeFn.push(seconds);
				let hour = dayDiff * 24 + hours * 1;
				//			    debugger
				if(0 < hour < 10) {
					this.hour = '0' + hour;
				} else if(hour == 0) {
					this.hour = hour;
				} else {
					this.hour = hour;
				}
				if(minutes < 10) {
					this.minutes = '0' + minutes;
				} else {
					this.minutes = minutes;
				}
				if(seconds < 10) {
					this.seconds = '0' + seconds;
				} else {
					this.seconds = seconds;
				}
				console.log(hour)
			},
			getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}
		},
		// 侦听器
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			}
		},
	})
</script>